<template>
  <a-layout style="min-height: calc(100vh - 64px)">
    <a-layout-sider collapsible v-model:collapsed="collapsed">
      <div class="logo">管理后台</div>
      <a-menu theme="dark" mode="inline" :selectedKeys="selectedKeys">
        <a-menu-item v-if="hasPerm('article:write') || hasPerm('article:update') || hasPerm('article:delete')" key="articles" @click="go('articles')">文章管理</a-menu-item>
        <a-menu-item v-if="hasPerm('category:manage')" key="categories" @click="go('categories')">分类管理</a-menu-item>
        <a-menu-item v-if="hasPerm('tag:manage')" key="tags" @click="go('tags')">标签管理</a-menu-item>
        <a-menu-item v-if="hasPerm('comment:manage')" key="comments" @click="go('comments')">评论管理</a-menu-item>
        <a-menu-item v-if="hasPerm('resume:manage')" key="resume" @click="go('resume')">简历管理</a-menu-item>
        <a-menu-item v-if="hasPerm('oss:manage')" key="oss" @click="go('oss')">文件管理</a-menu-item>
        <a-menu-item v-if="hasPerm('user:manage')" key="users" @click="go('users')">用户管理</a-menu-item>
        <a-menu-item v-if="hasPerm('user:manage')" key="user-roles" @click="go('user-roles')">用户角色</a-menu-item>
        <a-menu-item v-if="hasPerm('user:manage')" key="sessions" @click="go('sessions')">在线会话</a-menu-item>
        <a-menu-item v-if="hasPerm('role:manage')" key="roles" @click="go('roles')">角色管理</a-menu-item>
        <a-menu-item v-if="hasPerm('permission:manage')" key="permissions" @click="go('permissions')">权限管理</a-menu-item>
        <a-menu-item v-if="hasPerm('permission:manage')" key="oplogs" @click="go('oplogs')">操作日志</a-menu-item>
        <a-menu-item v-if="hasPerm('permission:manage')" key="settings" @click="go('settings')">系统配置</a-menu-item>
        <a-menu-item v-if="hasPerm('permission:manage')" key="api-docs" @click="go('api-docs')">API文档</a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-content style="padding: 16px">
        <router-view />
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const collapsed = ref(false)
const route = useRoute()
const router = useRouter()
const active = computed(() => (route.name?.toString().startsWith('Admin') ? route.name?.toString().replace('Admin','').toLowerCase() : 'articles'))
const selectedKeys = computed(() => [active.value])

function go(key: string) {
  router.push({ path: `/admin/${key}` })
}

const permSet = computed<Set<string>>(() => {
  try {
    const p = localStorage.getItem('profile')
    if (!p) return new Set()
    const perms = (JSON.parse(p).perms as string) || ''
    return new Set(perms.split(',').map(s => s.trim()).filter(Boolean))
  } catch { return new Set() }
})
function hasPerm(code: string) { return permSet.value.has(code) }
</script>

<style scoped>
.logo { height: 32px; margin: 16px; color: #fff; text-align: center; line-height: 32px; opacity: 0.85; }
</style>


